<template>
  <div class="catalog" :class="foldCatalog ? 'hide' : ''">
    <h1 class="title">图层目录</h1>
    <div class="hide" @click="foldCatalog = !foldCatalog">
      <el-icon v-if="foldCatalog" color="#fff"><ArrowLeft /></el-icon>
      <el-icon v-if="!foldCatalog" color="#fff"><ArrowRight /></el-icon>
    </div>
    <el-tree
      ref="treeRef"
      :data="catalogTree"
      @check="selectNode"
      show-checkbox
      default-expand-all
      node-key="id"
      :default-checked-keys="[0, 1, 2, 3, 4]"
      highlight-current
      :props="defaultProps"
      ><template #default="{ node, data }">
        <span class="custom-tree-node">
          <!-- 用带参的计算属性 -->
          <img :src="geoIcon(data.geoType)" />
          <span> {{ '  ' + node.label }} </span>
        </span>
      </template>
    </el-tree>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { ElTree } from 'element-plus'
import useCatalog from './hooks/useCatalog' // 目录树 hook
const { foldCatalog, treeRef, defaultProps, catalogTree, selectNode, geoIcon } =
  useCatalog() // 目录树 hook
// const treeRef = ref() // 目录树
onMounted(() => {
  console.dir(selectNode)
})
</script>

<style scoped>
.catalog {
  position: fixed;
  top: 50%;
  right: 0;
  padding-bottom: 25px;
  transform: translateX(0) translateY(-50%);
  width: 180px;
  background: #fff;
  /* padding: 10px 0; */
  border-radius: 5px 0 0 5px;
  transition: all 0.7s;
  z-index: 2;
}
.catalog.hide {
  transform: translateX(100%) translateY(-50%);
  /* transform: translateY(-50%); */
}
.catalog .title {
  text-align: center;
  padding: 10px;
  border-radius: 5px 0 0 0;
  background: #3a8fe2;
  user-select: none;
  color: #fff;
}
.catalog .hide {
  position: absolute;
  top: 82px;
  left: -15px;
  width: 15px;
  height: 48px;
  line-height: 48px;
  background: #3a8fe2;
  border-radius: 8px 0 0 8px;
  cursor: pointer;
}
</style>
